<template>
  <div>
    <p>ID：{{this.$route.params.id}}</p>
    <ul>
      <li v-for="(value,key) in messageDetail" :key="key">{{value}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "MessageDetail",
    data() {
      return {
        messageDetail: {},
        allMessageDetails: []
      }
    },
    mounted() {
      setTimeout(() => {
        this.allMessageDetails = [ // 模拟数据库的数据
          {
            id: 1,
            title: 'message001',
            content: 'message001.........'
          },
          {
            id: 2,
            title: 'message002',
            content: 'message002.........'
          },
          {
            id: 3,
            title: 'message003',
            content: 'message003.........'
          },
        ]
        this.messageDetail = this.allMessageDetails.find((detail) => detail.id === this.$route.params.id * 1)
      }, 1000);
    },
    watch: {
      $route(data) { // 监听路由的变化
        this.messageDetail = this.allMessageDetails.find((detail) => detail.id === data.params.id * 1)
      }
    }
  }
</script>

<style scoped>

</style>
